// 给导航栏添加下拉效果
document.querySelector('.head2').addEventListener("mouseenter",function(){
    document.querySelector('.xiala').style.height = "50px";
})
document.querySelector('.head2').addEventListener("mouseleave",function(){
    document.querySelector('.xiala').style.height = "0px";
})
document.querySelector('.xiala').addEventListener("mouseenter",function(){
    document.querySelector('.xiala').style.height = "50px";
})
document.querySelector('.xiala').addEventListener("mouseleave",function(){
    document.querySelector('.xiala').style.height = "0px";
})
//------------------------------------

// 这里是轮播图的js


let bg = [
    { url : './轮播图素材/c2.png',title :'./编程视频/c++视频2.html' },
    { url : './轮播图素材/python3.png' ,title:'./编程视频/python视频3.html'},
    { url : './轮播图素材/四级2.png',title:'大学英语/四级2.html' },
    { url : './轮播图素材/前端2.png',title:'./编程视频/web视频2.html'},
]
let i = 0

const img = document.querySelector('.lunbo')
const last = document.querySelector('.last')
const next = document.querySelector('.next')
const li = document.querySelectorAll('li')
last.addEventListener('click',function(ev){
    ev.stopPropagation()
    i--
    if(i < 0){
    i=3
}
    console.log(i);
    img.style.backgroundImage=`url(${bg[i].url})`
    document.querySelector('.foot .xuanzhong').classList.remove('xuanzhong')
    document.querySelector(`.foot li:nth-child(${i + 1})`).classList.add('xuanzhong')
    return i;
    
})

next.addEventListener('click',function(ev){
    ev.stopPropagation()
    i++
    if( i > 3){
        i = 0
    }
    img.style.backgroundImage=`url(${bg[i].url})`
    document.querySelector('.foot .xuanzhong').classList.remove('xuanzhong')
    document.querySelector(`.foot li:nth-child(${i + 1})`).classList.add('xuanzhong')
    return i;
})

for(let j=0; j < 4 ; j ++){
    li[j].addEventListener('mouseenter',function(){
        document.querySelector('.foot .xuanzhong').classList.remove('xuanzhong')
        document.querySelector(`.foot li:nth-child(${j + 1})`).classList.add('xuanzhong')
        i = j;
        img.style.backgroundImage=`url(${bg[i].url})`
        return i;
        
    })
}



function fn(){
    i++
    if(i == 3){
        i=0               
    }
    else if( i==-1){
        i=3
    }
    img.style.backgroundImage=`url(${bg[i].url})`   
    document.querySelector('.foot .xuanzhong').classList.remove('xuanzhong')
    document.querySelector(`.foot li:nth-child(${i + 1})`).classList.add('xuanzhong') 
    return i;
    
}
let lunbo = setInterval(fn,3000)

img.addEventListener('mouseenter',function(){
    clearInterval(lunbo)
})
img.addEventListener('mouseleave',function(){
    lunbo = setInterval(fn,3000)
})


img.addEventListener('click',function(){
    window.open(`${bg[i].title}`)               
})

//_____________________________

//这里是课程列表的下拉效果
let int1 = true
let arr = document.querySelectorAll(".arr")
console.log(arr);
document.querySelector('.java').addEventListener("click",function(e){
    let javaCard = document.querySelector(".javacard")
    if(int1){
        arr[0].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int1 = false
    }else{
        arr[0].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
                e.target.style.backgroundColor = ""
        int1 = true  
    }
})

let int2 = true
document.querySelector('.web').addEventListener("click",function(e){
    let javaCard = document.querySelector(".webcard")
    if(int2){
        arr[1].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int2 = false
    }else{
        arr[1].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int2 = true  
    }
})

let int3 = true
document.querySelector('.c').addEventListener("click",function(e){
    let javaCard = document.querySelector(".ccard")
    if(int3){
        arr[2].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int3 = false
    }else{
        arr[2].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int3 = true  
    }
})

let int4 = true
document.querySelector('.python').addEventListener("click",function(e){
    let javaCard = document.querySelector(".pythoncard")
    if(int4){
        arr[3].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int4 = false
    }else{
        arr[3].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int4 = true  
    }
})

let int5 = true
document.querySelector('.AB').addEventListener("click",function(e){
    let javaCard = document.querySelector(".ABcard")
    if(int5){
        arr[4].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int5 = false
    }else{
        arr[4].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int5 = true  
    }
})

let int6 = true
document.querySelector('.level4').addEventListener("click",function(e){
    let javaCard = document.querySelector(".level4card")
    if(int6){
        arr[5].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int6 = false
    }else{
        arr[5].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int6 = true  
    }
})

let int7 = true
document.querySelector('.level6').addEventListener("click",function(e){
    let javaCard = document.querySelector(".level6card")
    if(int7){
        arr[6].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = "rgb(94, 140, 232)"
        int7 = false
    }else{
        arr[6].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int7 = true  
    }
})

let int8= true
document.querySelector('.cut').addEventListener("click",function(e){
    let javaCard = document.querySelector(".cutcard")
    if(int8){
        arr[7].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int8 = false
    }else{
        arr[7].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int8 = true  
    }
})

let int9 = true
document.querySelector('.ps').addEventListener("click",function(e){
    let javaCard = document.querySelector(".pscard")
    if(int9){
        arr[8].style.transform = "rotate(-90deg)"
        javaCard.style.maxHeight = "750px"
        e.target.style.backgroundColor = " rgb(94, 140, 232)"
        int9 = false
    }else{
        arr[8].style.transform = "rotate(0deg)"
        javaCard.style.maxHeight = "0"
        e.target.style.backgroundColor = ""
        int9 = true
    }
})

//---------------------------
// 这里是api的调用

